<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>祝福墙 | 小金果一周岁生日</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.tailwindcss.com?plugins=forms" rel="stylesheet">


    <!-- 配置Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF6B9B',
                        secondary: '#6BCBFF',
                        accent: '#FFD66B',
                        purple: '#A78BFA',
                        green: '#6BFFB8'
                    }
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }

            .wish-card {
                transition: all 0.3s ease;
                cursor: pointer;
                transform: rotate(var(--rotation, 0deg));
                animation: float var(--float-duration, 6s) ease-in-out infinite;
            }

            .wish-card:hover {
                transform: rotate(0deg) scale(1.05) translateY(-5px);
                z-index: 20;
            }

            .cake-layer {
                border-radius: 50% / 20%;
            }

            .candle-flame {
                animation: flame-flicker 2s infinite alternate;
            }
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0) rotate(var(--rotation, 0deg));
            }
            50% {
                transform: translateY(-15px) rotate(var(--rotation, 0deg));
            }
        }

        @keyframes flame-flicker {
            0% {
                transform: scale(1);
                height: 20px;
            }
            50% {
                transform: scale(1.1);
                height: 22px;
            }
            100% {
                transform: scale(0.9);
                height: 18px;
            }
        }

        @keyframes fade-in {
            from {
                opacity: 0;
                transform: scale(0.8);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }
    </style>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/memories.css">
    <link href="https://fonts.googleapis.com/css2?family=Fredoka+One:wght@400&family=Nunito:wght@300;400;600;700&display=swap"
          rel="stylesheet">
</head>


<body class="bg-gradient-to-b from-pink-50 to-blue-50 min-h-screen font-cute overflow-x-hidden relative">
<!-- 背景粒子系统 -->
<canvas id="particles-canvas"></canvas>

<!-- 音乐控制 -->
<div class="music-control">
    <button id="music-toggle" class="music-btn">🎵</button>
</div>

<!-- 导航栏 -->
<nav style="    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #F9D8E8;
    backdrop-filter: blur(10px);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);">
    <button class="nav-btn" onclick="window.location.href='memories.html'">📖 上一页</button>
    <h1 class="page-title">成长祝福</h1>
    <button class="nav-btn" onclick="window.location.href='game.html'">💌 下一页</button>
</nav>

<!-- 背景音乐 -->
<audio id="background-music" loop>
    <source src="../audio/background.wav" type="audio/wav">
</audio>
<!-- 装饰元素 -->
<div class="fixed top-20 left-5 w-16 h-16 bg-primary/20 rounded-full animate-pulse"></div>
<div class="fixed top-60 right-10 w-20 h-20 bg-secondary/20 rounded-full animate-pulse"
     style="animation-delay: 1s;"></div>
<div class="fixed bottom-40 left-10 w-18 h-18 bg-accent/20 rounded-full animate-pulse"
     style="animation-delay: 0.5s;"></div>

<!-- 主内容 -->
<div class="container mx-auto px-4 py-8 relative z-10">
    <!-- 导航 -->
    <nav class="flex justify-between items-center mb-10">
        <a href="welcome.html" class="text-gray-700 hover:text-primary transition-colors flex items-center">
            <i class="fa fa-home mr-2"></i> 首页
        </a>
        <h1 class="text-2xl md:text-3xl font-bold text-primary">祝福墙</h1>
        <div class="w-10"></div> <!-- 占位，保持导航平衡 -->
    </nav>

    <!-- 页面标题 -->
    <div class="text-center mb-10">

        <p class="text-gray-600 max-w-2xl mx-auto">留下你对小金果的美好祝福，共同见证成长的喜悦</p>
    </div>

    <!-- 添加祝福卡片 -->
    <div class="max-w-2xl mx-auto mb-16 bg-white rounded-2xl shadow-xl p-6 md:p-8 transform transition-all hover:shadow-2xl">
        <h3 class="text-xl font-bold text-primary mb-6 text-center">写下你的祝福</h3>

        <form id="wish-form" class="space-y-4">
            <div>
                <label for="name" class="block text-gray-700 mb-2">你的名字</label>
                <input type="text" id="name" name="name" required
                       class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"
                       placeholder="请输入你的名字">
            </div>

            <div>
                <label for="content" class="block text-gray-700 mb-2">祝福内容</label>
                <textarea id="content" name="content" rows="4" required
                          class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all resize-none"
                          placeholder="请写下对小糯米的祝福..."></textarea>
            </div>

            <div>
                <label class="block text-gray-700 mb-2">选择卡片颜色</label>
                <div class="flex gap-3 flex-wrap">
                    <button type="button"
                            class="color-option w-8 h-8 rounded-full bg-primary border-2 border-transparent focus:border-gray-500"
                            data-color="#FF6B9B"></button>
                    <button type="button"
                            class="color-option w-8 h-8 rounded-full bg-secondary border-2 border-transparent focus:border-gray-500"
                            data-color="#6BCBFF"></button>
                    <button type="button"
                            class="color-option w-8 h-8 rounded-full bg-accent border-2 border-transparent focus:border-gray-500"
                            data-color="#FFD66B"></button>
                    <button type="button"
                            class="color-option w-8 h-8 rounded-full bg-purple border-2 border-transparent focus:border-gray-500"
                            data-color="#A78BFA"></button>
                    <button type="button"
                            class="color-option w-8 h-8 rounded-full bg-green border-2 border-transparent focus:border-gray-500"
                            data-color="#6BFFB8"></button>
                </div>
                <input type="hidden" id="color" name="color" value="#FF6B9B">
            </div>

            <button type="submit"
                    class="w-full bg-gradient-to-r from-primary to-secondary text-white font-bold py-3 px-6 rounded-lg shadow-md hover:opacity-90 transition-opacity transform hover:scale-[1.02] active:scale-[0.98]">
                提交祝福 <i class="fa fa-heart ml-2"></i>
            </button>
        </form>
    </div>

    <!-- 祝福展示区 -->
    <div id="wishes-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto mb-20">
        <!-- 祝福卡片将通过JS动态生成 -->
    </div>

    <!-- 背景蛋糕装饰 (仅在大屏幕显示) -->
    <div class="hidden lg:block fixed bottom-0 right-0 w-1/3 h-2/3 pointer-events-none z-0 opacity-20">
        <!-- 蛋糕底座 -->
        <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-3/4 h-1/3 bg-primary cake-layer"></div>
        <!-- 蛋糕中层 -->
        <div class="absolute bottom-1/3 left-1/2 transform -translate-x-1/2 w-2/3 h-1/3 bg-secondary cake-layer"></div>
        <!-- 蛋糕顶层 -->
        <div class="absolute bottom-2/3 left-1/2 transform -translate-x-1/2 w-1/2 h-1/3 bg-accent cake-layer"></div>

        <!-- 蜡烛 -->
        <div class="absolute bottom-[70%] left-1/2 transform -translate-x-1/2 w-4 h-16 bg-white rounded-t-md"></div>
        <div class="absolute bottom-[80%] left-1/2 transform -translate-x-1/2 w-3 h-6 bg-yellow-300 rounded-full candle-flame"></div>
    </div>
</div>

<!-- 成功提示 -->
<div id="success-toast"
     class="fixed bottom-8 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-6 py-3 rounded-full shadow-lg opacity-0 pointer-events-none transition-opacity z-50">
    祝福添加成功！
</div>

<script>
    // 祝福数据
    let wishesData = [];
    // 选中的颜色
    let selectedColor = '#FF6B9B';

    // DOM加载完成后初始化
    document.addEventListener('DOMContentLoaded', function () {
        // 加载初始祝福
        loadWishes();

        // 初始化颜色选择
        initColorSelection();

        // 绑定表单提交事件
        document.getElementById('wish-form').addEventListener('submit', function (e) {
            e.preventDefault();
            addNewWish();
        });

        // 播放背景音乐
        const music = document.getElementById('background-music');
        music.volume = 0.3;
        music.play().catch(e => {
            console.log('需要用户交互才能播放音乐:', e);
            document.addEventListener('click', () => {
                music.play();
            }, {once: true});
        });
    });

    // 加载祝福数据
    function loadWishes() {
        // 先从本地存储加载
        const savedWishes = localStorage.getItem('birthdayWishes');
        if (savedWishes) {
            wishesData = JSON.parse(savedWishes);
        } else {
            // 加载默认祝福
            fetch('../data/wishes.json')
                .then(response => response.json())
                .then(data => {
                    wishesData = data.wishes || [];
                    renderWishes();
                });
            return;
        }

        renderWishes();
    }

    // 渲染祝福卡片
    function renderWishes() {
        const container = document.getElementById('wishes-container');
        container.innerHTML = '';

        // 如果没有祝福
        if (wishesData.length === 0) {
            container.innerHTML = `
                    <div class="col-span-full text-center py-16">
                        <i class="fa fa-comment-o text-5xl text-gray-300 mb-4"></i>
                        <p class="text-gray-500">还没有祝福哦，快来写下第一个祝福吧！</p>
                    </div>
                `;
            return;
        }
        wishesData.sort((a, b) =>   b.id-a.id);
        // 渲染所有祝福
        wishesData.forEach((wish, index) => {
            // 随机旋转角度和动画持续时间，让卡片看起来更自然
            const rotation = (Math.random() * 6) - 3; // -3到3度之间
            const floatDuration = 5 + Math.random() * 3; // 5到8秒之间

            const wishCard = document.createElement('div');
            wishCard.className = 'wish-card bg-white rounded-xl shadow-lg p-6 relative overflow-hidden';
            wishCard.style.setProperty('--rotation', `${rotation}deg`);
            wishCard.style.setProperty('--float-duration', `${floatDuration}s`);
            wishCard.style.animationDelay = `${index * 0.1}s`;

            // 卡片顶部颜色条
            wishCard.innerHTML = `
                    <div class="absolute top-0 left-0 right-0 h-2" style="background-color: ${wish.color}"></div>
                    <div class="relative">
                        <h4 class="font-bold text-lg mb-2 flex items-center">
                            <i class="fa fa-user-circle-o mr-2" style="color: ${wish.color}"></i>
                            ${wish.name}
                        </h4>
                        <p class="text-gray-600 mb-4">${wish.content}</p>
                        <div class="text-right text-sm text-gray-400">
                            ${formatDate(wish.date)}
                        </div>
                    </div>
                `;

            container.appendChild(wishCard);
        });
    }

    // 初始化颜色选择
    function initColorSelection() {
        const colorOptions = document.querySelectorAll('.color-option');

        // 设置初始选中状态
        colorOptions[0].classList.add('ring-2', 'ring-gray-500');

        colorOptions.forEach(option => {
            option.addEventListener('click', function () {
                // 移除所有选中状态
                colorOptions.forEach(opt => opt.classList.remove('ring-2', 'ring-gray-500'));

                // 设置当前选中状态
                this.classList.add('ring-2', 'ring-gray-500');

                // 保存选中的颜色
                selectedColor = this.dataset.color;
                document.getElementById('color').value = selectedColor;
            });
        });
    }

    // 添加新祝福
    function addNewWish() {
        const nameInput = document.getElementById('name');
        const contentInput = document.getElementById('content');

        // 获取输入值
        const name = nameInput.value.trim();
        const content = contentInput.value.trim();
        const color = selectedColor;

        // 验证输入
        if (!name || !content) {
            alert('请填写姓名和祝福内容');
            return;
        }

        // 创建新祝福对象
        const newWish = {
            id: Date.now(),
            name: name,
            content: content,
            color: color,
            date: new Date().toISOString()
        };

        // 添加到祝福列表
        wishesData.unshift(newWish);


        // 保存到本地存储
         localStorage.setItem('birthdayWishes', JSON.stringify(wishesData));
         // 写入数据库
         fetch('/py/api/add-wisher', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify(newWish)
         });

        // 重新渲染祝福列表
        renderWishes();

        // 重置表单
        nameInput.value = '';
        contentInput.value = '';

        // 播放音效
        document.getElementById('add-sound').play();

        // 显示成功提示
        showToast();

        // 创建彩屑效果
        createConfetti();
    }

    // 显示提示框
    function showToast() {
        const toast = document.getElementById('success-toast');
        toast.classList.remove('opacity-0');
        toast.classList.add('opacity-100');

        setTimeout(() => {
            toast.classList.remove('opacity-100');
            toast.classList.add('opacity-0');
        }, 3000);
    }

    // 格式化日期
    function formatDate(dateString) {
        const date = new Date(dateString);
        return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
    }

    // 创建彩屑效果
    function createConfetti() {
        const colors = ['#FF6B9B', '#6BCBFF', '#FFD66B', '#A78BFA', '#6BFFB8'];
        const container = document.body;

        for (let i = 0; i < 50; i++) {
            const confetti = document.createElement('div');
            confetti.className = 'confetti absolute';
            confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
            confetti.style.left = Math.random() * 100 + 'vw';
            confetti.style.width = Math.random() * 10 + 5 + 'px';
            confetti.style.height = Math.random() * 10 + 5 + 'px';
            confetti.style.animation = `confetti-fall ${Math.random() * 3 + 2}s linear forwards`;

            container.appendChild(confetti);

            // 动画结束后移除
            setTimeout(() => {
                confetti.remove();
            }, 5000);
        }
    }
</script>

<!-- 底部导航 -->
<div style=" position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #F9D8E8;
    backdrop-filter: blur(10px);
    padding: 15px;
    display: flex;
    justify-content: space-around;
    z-index: 100;
    box-shadow: 0 -2px 20px rgba(0,0,0,0.3);">
    <button class="nav-button" onclick="window.location.href='welcome.html'">
        <span class="nav-icon">🏠</span>
        <span class="nav-label">首页</span>
    </button>
    <button class="nav-button" onclick="window.location.href='story.html'">
        <span class="nav-icon">📖</span>
        <span class="nav-label">故事</span>
    </button>
    <button class="nav-button" onclick="window.location.href='invitation.html'">
        <span class="nav-icon">💌</span>
        <span class="nav-label">邀请</span>
    </button>
    <button class="nav-button" onclick="window.location.href='wishes.html'">
        <span class="nav-icon">💝</span>
        <span class="nav-label">祝福</span>
    </button>
</div>
<script src="../js/particles.js"></script>
<script src="../js/wishes.js"></script>
</body>
</html>